<template>
  <div>
    <div class="form-wrap">
      <div class="input-field">
        <span class="label mark">+86</span>
        <span class="input-block">中国</span>
      </div>
      <div class="input-field" style="position:relative">
        <span class="label">手机号</span>
        <input
          v-model="form.phone"
          class="input-block"
          type="number"
          placeholder="请输入手机号"
          placeholder-class="placeholder-part"
          maxlength="11"
        />
      </div>
      <div class="input-field">
        <span class="label">验证码</span>
        <input
          v-model="form.code"
          class="input-block"
          type="number"
          placeholder="请输入验证码"
          placeholder-class="placeholder-part"
          maxlength="6"
        />
        <ButtonCloudMsg :phone="form.phone" type="COMPANY" />
      </div>

      <button class="btn-round-blue" @click="handleNextStep">下一步</button>
    </div>
  </div>
</template>

<script>
import ButtonCloudMsg from '@/components/ButtonCloudMsg'
import {} from '@/utils'
import { BIND_CLOUD_ACCOUNT_PHONE } from '@/api'

export default {
  components: { ButtonCloudMsg },
  props: {},
  data () {
    return {
      form: { phone: '' }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    handleNextStep () {
      if (!this.form.code) {
        this.$toast('请输入验证码')
      } else {
        this.bindPhone()
      }

      if (this.$store.state.test) {
        this.$router.push(
          '/pages/mine/cloud-account/step4/main?memberType=COMPANY'
        )
      }
    },
    bindPhone () {
      const vm = this

      let params = {
        bizUserId: vm.$store.state.account.shopId,
        ...vm.form
      }

      BIND_CLOUD_ACCOUNT_PHONE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$router.push(
              '/pages/mine/cloud-account/step4/main?memberType=COMPANY'
            )
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  > .btn-round-blue {
    margin-top: 30px;
  }
}
</style>
